//index.js
//获取应用实例
const app = getApp()
var wxDraw = require("../../utils/wxdraw.min.js").wxDraw;
var Shape = require("../../utils/wxdraw.min.js").Shape;
var AnimationFrame = require("../../utils/wxdraw.min.js").AnimationFrame;


Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    wxCanvas: null
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  bindtouchstart: function (e) {
    // 检测手指点击事件
    // console.log(e);
    this.wxCanvas.touchstartDetect(e);

  },
  bindtouchmove: function (e) {
    // 检测手指点击 之后的移动事件
    this.wxCanvas.touchmoveDetect(e);
  },
  bindtouchend: function () {
    //检测手指点击 移出事件
    this.wxCanvas.touchendDetect();
  },
  bindtap: function (e) {
    this.wxCanvas.tapDetect(e);
  },
  bindlongpress: function (e) {
    // console.log(e);
    this.wxCanvas.longpressDetect(e);
  },
  onLoad: function () {
    /** 
     * 
     */
    // console.log(requestAnimationFrame);
    var context = wx.createCanvasContext('textA')

    // Fill with gradient
    this.wxCanvas = new wxDraw(context, 0, 0, 400, 500);
    
    let text = new Shape('text', { text: "帝", x: 70, y: 240, fontSize: 60, fillStyle: "#4285f4", needShadow: true }, 'fill', false)
    let text2 = new Shape('text', { text: "の", x: 140, y: 240, fontSize: 60, fillStyle: "#ea4335", needShadow: true }, 'fill', false)
    let text3 = new Shape('text', { text: "工", x: 210, y: 240, fontSize: 60, fillStyle: "#fbbc05", needShadow: true }, 'fill', false)
    let text4 = new Shape('text', { text: "具", x: 280, y: 240, fontSize: 60, fillStyle: "#34a853", needShadow: true }, 'fill', false)

    this.wxCanvas.add(text);
    this.wxCanvas.add(text2);
    this.wxCanvas.add(text3);
    this.wxCanvas.add(text4);


    setTimeout(function () {
      text.animate({ "y": "-=100", shadow: { offsetY: 100, blur: 30 } }, { easing: "swingTo", duration: 1000 }).animate({ "y": "+=100", shadow: { offsetY: 5, blur: 5 } }, { easing: "swingFrom", duration: 1000 }).start(true);
    }, 50);

    setTimeout(function () {
      text2.animate({ "y": "-=100", shadow: { offsetY: 100, blur: 30 } }, { easing: "swingTo", duration: 1000 }).animate({ "y": "+=100", shadow: { offsetY: 5, blur: 5 } }, { easing: "swingFrom", duration: 1000 }).start(true);
    }, 100);

    setTimeout(function () {
      text3.animate({ "y": "-=100", shadow: { offsetY: 100, blur: 30 } }, { easing: "swingTo", duration: 1000 }).animate({ "y": "+=100", shadow: { offsetY: 5, blur: 5 } }, { easing: "swingFrom", duration: 1000 }).start(true);
    }, 150);

    setTimeout(function () {
      text4.animate({ "y": "-=100", shadow: { offsetY: 100, blur: 30 } }, { easing: "swingTo", duration: 1000 }).animate({ "y": "+=100", shadow: { offsetY: 5, blur: 5 } }, { easing: "swingFrom", duration: 1000 }).start(true);
    }, 200);
  },
  onUnload: function () {
    this.wxCanvas.clear(); //推荐这个
  },

  bindToWolf: function(e) {
    wx.navigateTo({
      url: '../wolf/wolf',
    })
  }
})